<template>
  <div class="search">
    <div class="top">
      <div class="box">
        <img src="../../assets/footer/search.png">
        <input type="text" v-model='keyword' placeholder="按档口/品牌/类目名称搜索">
      </div>
      <button class="btn_search" @click='searchList'>搜索</button>
      <div class="title">
        <div class="title_list" :class='item.choose?"title_selected":""' v-for='(item,index) in typeList' @click='changeMenus(index)'>{{item.title}}</div>
      </div>
    </div>
    <div class="title_header">
      <img src="../../assets/icon/hot.png">
      <div class="title_text">热销{{typeList[ids].title}}</div>
    </div>
    <div class="list_box">
      <div class="list_list" v-for='item in list' @click='nav(item)'>{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      keyword: '',
      HotBrands: [],
      HotCategroys: [],
      SearchKeywords: [],
      typeList:[{title:'档口/品牌',id:1,choose:true},{title:'类目',id:2,choose:false}],
      ids:0
    }
  },
  created: function () {
    const that = this;
    that.$http('/shop/agent/getitemhotkeyword',{userIDs:-1,fromType:3,version:2},function(res){
      if(res.Result){
        that.HotCategroys = res.Data.HotCategroys
        that.SearchKeywords = res.Data.SearchKeywords
        that.HotBrands = res.Data.HotBrands
      }
    },'GET')
  },
  computed:{
    list: function(){
      if(this.typeList[0].choose){
        return this.HotBrands
      }else if(this.typeList[1].choose){
        return this.HotCategroys
      }
    }
  },
  methods: {
    changeMenus:function(idx){
      if(this.typeList[idx].choose){

      }else{
        this.typeList.map( item => {
          item.choose = false
        })
        this.typeList[idx].choose = true
        this.ids = idx
      }
    },
    nav: function(item){
      this.$router.push({
        path: '/list',
        query: { keyword:item,rid:-1,valueIDS:''}
      })
    },
    searchList: function(){
      this.$router.push({
        path: '/list',
        query: { keyword:this.keyword,rid:-1,valueIDS:''}
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top{width: 92%;padding: 10px 4% 0;overflow: hidden;border-bottom:1px solid #c2c2c2;}
  .top .box{float: left;width: 70%;height: 24px;padding: 5px;border-radius: 5px;border: 1px solid #c2c2c2;overflow: hidden;}
  .top .box img{float: left;width: 20px;height: 20px;margin: 2px 10px;}
  .top .box input{float: left;font-size: 14px;color: #555;width: 70%;height: 24px;line-height: 24px;border:none;outline: none;}
  .btn_search{float: right;width: 20%;height: 34px;line-height: 34px;font-size: 14px;color: #555;text-align: center;border-radius: 5px;border: none;outline:none;}
  .title{float: left;padding-top: 10px;width: 100%;overflow: hidden;display: flex;flex-direction: row;justify-content: space-around;}
  .title .title_list{text-align: center;height: 34px;line-height: 34px;border-bottom: 2px solid #fff;font-size: 16px;}
  .title .title_selected{border-bottom: 2px solid #ff4721; color: #ff4721;}
  .title_header{width: 92%;padding: 20px 4% 10px;font-size: 16px;color: #112a39;line-height: 20px;overflow: hidden;}
  .title_header img{width: 20px;height: 20px;float: left;margin-right: 10px;}
  .title_header .title_text{float: left;height: 20px;line-height: 20px;}
  .list_box{width: 90%;padding: 10px 5%;overflow: hidden;}
  .list_box .list_list{float: left;padding: 0 15px;font-size: 12px;height:32px;line-height:32px;color: #0b1b27;border-radius: 12px;background-color: #f5f5f5;margin-left: 10px;margin-bottom: 10px;}
</style>
